<template>
  <div class="login">
    <div class="login_form">
      <div class="login_title">账户登录</div>
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item>
          <el-input placeholder="请输入账户" v-model="form.yhm"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="form.type" name="type"
            >我承诺，不会将账号信息泄露给与研究无关的人 <br />
            员，以保护病人隐私
          </el-checkbox>
        </el-form-item>
      </el-form>
      <el-button v-if="form.type" @click="login" type="primary">登录</el-button>
      <el-button v-if="!form.type" type="info">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: '',
        yhm: '',
        type: '',
      },
    }
  },
  methods: {
    async login() {
      await this.$store.dispatch('user/login', this.form)
      this.$router.push('/')
    },
  },
}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url('../../assets/pcdenglu.jpeg') center;
  background-size: cover;
  position: relative;
}
.login_form {
  width: 400px;
  height: 350px;
  background-color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60%;
  margin: auto;
  padding: 0 40px 0 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login_title {
  height: 66px;
  text-align: center;
  line-height: 66px;
  font-size: 20px;
  font-weight: bolder;
  color: #8d9caa;
}
</style>
<style>
.el-checkbox__input {
  position: relative;
  top: -19px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}
</style>
